<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>左侧导航栏</title>
        <link rel="stylesheet" type="text/css" href="../static/style1.css">
    </head>

    <body>

        <div class="header">
            <h2>页眉</h2>
        </div>

        <div class="big_box">
            <div class="side_nav">
                <div class="nav_lvl1" >
                    <div class="nav_lvl1_img"></div>
                    <span class="nav_lvl1_text">一级标题11</span>
                    <div class="nav_lvl1_img"></div>
                </div>
                <div class="nav_lvl2_box" >
                    <div class="item2">
                        <span class="item2_text">二级标题1</span>
                    </div>
                    <div class="item2">
                        <span class="item2_text">二级标题2</span>
                    </div>
                    <div class="item2">
                        <span class="item2_text">二级标题3</span>
                    </div>
                </div>

                <!-- 第1.5块：临时插入无二级标题 -->
                <div class="nav_lvl1">
                    <div class="nav_lvl1_img"></div>
                    <span class="nav_lvl1_text">一级标题1.5</span>
                    <div class="nav_lvl1_img"></div>
                </div>
                <div class="nav_lvl2_box">
                    <!-- 	这部分不能删 -->
                </div>

                <!-- 第二块：一级标题2 -->
                <div class="nav_lvl1">
                    <div class="nav_lvl1_img"></div>
                    <span class="nav_lvl1_text">一级标题2</span>
                    <div class="nav_lvl1_img"></div>
                </div>
                <div class="nav_lvl2_box">
                    <div class="item2">
                        <span class="item2_text">二级标题4</span>
                    </div>
                    <div class="item2">
                        <span class="item2_text">二级标题5</span>
                    </div>
                    <div class="item2">
                        <span class="item2_text">二级标题6</span>
                    </div>
                    <div class="item2">
                        <span class="item2_text">二级标题7</span>
                    </div>
                </div>

                <!-- 第三块：一级标题3 -->
                <div class="nav_lvl1">
                    <div class="nav_lvl1_img"></div>
                    <span class="nav_lvl1_text">一级标题3</span>
                    <div class="nav_lvl1_img"></div>
                </div>
                <div class="nav_lvl2_box">
                    <div class="item2">
                        <span class="item2_text">二级标题8</span>
                    </div>
                    <div class="item2">
                        <span class="item2_text">二级标题9</span>
                    </div>
                </div>

                <!-- 第三块：一级标题3 -->
                <div class="nav_lvl1">
                    <div class="nav_lvl1_img"></div>
                    <span class="nav_lvl1_text">一级标题3</span>
                    <div class="nav_lvl1_img"></div>
                </div>
                <div class="nav_lvl2_box">
                    <div class="item2">
                        <span class="item2_text">二级标题8</span>
                    </div>
                    <div class="item2">
                        <span class="item2_text">二级标题9</span>
                    </div>
                </div>

                <!-- 第三块：一级标题3 -->
                <div class="nav_lvl1">
                    <div class="nav_lvl1_img"></div>
                    <span class="nav_lvl1_text">一级标题3</span>
                    <div class="nav_lvl1_img"></div>
                </div>
                <div class="nav_lvl2_box">
                    <div class="item2">
                        <span class="item2_text">二级标题8</span>
                    </div>
                    <div class="item2">
                        <span class="item2_text">二级标题9</span>
                    </div>
                </div>

                <!-- 第三块：一级标题3 -->
                <div class="nav_lvl1">
                    <div class=" nav_lvl1_img"></div>
                    <span class="nav_lvl1_text">一级标题3</span>
                    <div class="nav_lvl1_img"></div>
                </div>
                <div class="nav_lvl2_box">
                    <div class="item2">
                        <span class="item2_text">二级标题8</span>
                    </div>
                    <div class="item2">
                        <span class="item2_text">二级标题9</span>
                    </div>
                </div>

                <!-- 第三块：一级标题3 -->
                <div class="nav_lvl1">
                    <div class="nav_lvl1_img"></div>
                    <span class="nav_lvl1_text">一级标题3</span>
                    <div class="nav_lvl1_img"></div>
                </div>
                <div class="nav_lvl2_box">
                    <div class="item2">
                        <span class="item2_text">二级标题8</span>
                    </div>
                    <div class="item2">
                        <span class="item2_text">二级标题9</span>
                    </div>
                </div>
            </div>

            <div id="demo" class="content">

            </div>
        </div>
 
    </body>

    
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            $('.nav_lvl1').click(
                function(val){
                    $('.content').html($(this).children()[1].innerText);
                    //在内容页显示点击的按钮文字
                    if($(this).next().is(":hidden")){//如果二级导航没打开，打开它
                        $(this).next().show(500);
                    }
                    else if($(this).next().children().length==0){}//如果没有二级导航，没操作
                    else{//如果二级导航打开了，关闭它
                        $(this).next().hide(500)
                    }	
                }
            );

            $('.item2').click(//点击二级标题触发事件
                function(val){
                var myJavaScriptList = JSON.parse('{{ current_user |safe }}');
                    document.getElementById("demo").innerHTML = marked.parse("*Write* your **Markdown** here") +
                   marked.parse("*Write* your **Markdown** here") + "abc";// + current_user;
                    //$('.content').html(marked.parse("*Write* your **Markdown** here"));
                }
            )

        })
    </script>
</html>

